import { Button, Drawer, Radio, Space, Form } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import WpsFrom from '../index'
import FormData from '../components/FormData'
import UploadOss from '@/utils/aliOssUpload'
import moment from 'moment'
import './index.less'
const WpsDrawer = (props) => {
    const { visible = {}, onClose, dispatch, loading, handleCallback } = props
    const { show = false, detail = {}, collectionType = 'form', type = 'set' } = visible
    const { id, content, } = detail
    const [step, setStep] = useState('0')
    const defaultTitle = {
        form: "设置表单",
        Jielong: '设置接龙',
        vote: '设置投票',
        questionnaire: '设置问卷'
    }[collectionType]
    const defaultForm = {
        form: [{
            type: 'Cephalogram'
        }],
        Jielong: [{
            type: 'Cephalogram'
        }, {
            title: '填空题',
            type: 'Input',
            label: '',
            require: true,
            desc: '',
            rule: ''
        }],
        vote: [{
            type: 'Cephalogram'
        }, {
            title: '投票单选题',
            type: 'VoteRadio',
            label: '',
            require: true,
            desc: '',
            rule: '',
            option: [
                { label: '投票1' },
                { label: '投票2' },

            ]
        }],
        questionnaire: [{
            type: 'Cephalogram'
        }, {
            title: '单选题',
            type: 'Radio',
            label: '请选择性别',
            require: true,
            desc: '',
            rule: '',
            option: [
                {
                    label: '男'
                },
                { label: '女' },]
        },
        {
            title: '单选题',
            type: 'Radio',
            label: '请选择年龄',
            require: true,
            desc: '',
            rule: '',
            option: [
                {
                    label: '18岁以下'
                },
                { label: '18-23岁' },
                { label: '24-30岁' },
                { label: '31-40岁' },
                { label: '41-50岁' },
                { label: '50岁以上' },]
        },
        {
            title: '量表题',
            type: 'Scale',
            label: '请根据您的真实体验进行满意度评分',
            require: true,
            orderValue: '非常满意',
            reverseValue: '非常不满意',
            rule: 'order',
            scaleType: "satisfaction",
            scaleNum: 10
        }

        ],
    }
    const [dataList, setDataList] = useState([])
    const [form] = Form.useForm()
    useEffect(() => {
        if (show) {
            if (id || type === 'coby') {
                setDataList(content)
            }
            else {
                setDataList(defaultForm[collectionType])
            }
        }
        else {
            setDataList([])
            setStep('0')
        }
    }, [show])

    const handleSubmit = () => {
        form.validateFields().then(async (val) => {

            const { qrcodeUrl, startTime } = val;
            console.log(startTime)
            let img = (await UploadOss(qrcodeUrl)) || '';
            dispatch({
                type: 'liveStreaming/fakeInformationCollection',
                payload: {
                    ...val,
                    id,
                    collectionType,
                    content: JSON.stringify(dataList),
                    qrcodeUrl: img.toString(),
                    startTime: startTime ? moment(startTime[0]).format('YYYY-MM-DD') : '',
                    endTime: startTime ? moment(startTime[1]).format('YYYY-MM-DD') : '',
                },
                callback: () => {
                    onClose();
                    handleCallback();
                },
            });
        });
    }
    const StepContent = {
        0: <WpsFrom dataList={dataList} setDataList={setDataList}></WpsFrom>,
        1: <FormData form={form} detail={detail} ></FormData>
    }[step]
    const StepBtn = {
        0: <Space>
            <Button onClick={onClose}>取消</Button>
            <Button type="primary" onClick={() => {
                setStep('1')
            }}>
                下一步
            </Button>
        </Space>,
        1: <Space>
            <Button onClick={() => {
                setStep('0')
            }}>上一步</Button>
            <Button loading={loading} type="primary" onClick={() => {
                handleSubmit()
            }}>
                完成
            </Button>
        </Space>,
    }[step]
    return (
        <div className='wps_class'>
            <Drawer
                className='wps_class'
                title={defaultTitle}
                placement={'top'}
                open={show}
                contentWrapperStyle={{ height: "100%", overflow: 'hidden' }}
                onClose={onClose}
                extra={StepBtn}
            >
                {StepContent}
            </Drawer>
        </div>
    );
};
export default connect(({ loading }) => ({
    loading: loading.effects['liveStreaming/fakeInformationCollection']
}))(WpsDrawer);
;